<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue';
import SearchBox from '@/components/common/SearchBox.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const percentage = 50;
const state = reactive({
  overlayShow: false,
});
const onLoad = () => {};
const loading = ref(false);
const finished = ref(false);
const list = ref([
  {
    title: '拙政园  ',
    label: '苏州市姑苏区东北街178号',
  },
  {
    title: '观前街',
    label: '苏州市姑苏区',
  },
  {
    title: '苏州博物馆',
    label: '江苏省苏州市姑苏区苏北街204号',
  },
  {
    title: '狮子林',
    label: '苏州市姑苏区园林路23号',
  },
  {
    title: '平江路历史街区',
    label: '苏州市平江区平江路',
  },
  {
    title: '寒山寺',
    label: '苏州市姑苏区寒山寺弄24号',
  },
  {
    title: '山塘街',
    label: '苏州市姑苏区古城西北',
  },
  {
    title: '金鸡湖',
    label: '江苏省苏州市苏州工业园区金鸡湖大道北侧',
  },
]);
const tags = ref([]) as any;
const addToSearchText = (title) => {
  tags.value.push(title); // 添加新的标签
};

const addClicked = (value: number) => {
  let values = [...tags.value] as Array<number>;
  if (values.includes(value)) {
    let i = values.indexOf(value);
    values.splice(i, 1);
  } else {
    values.push(value);
  }
  tags.value = values;
};

const search = (value: string) => {
  console.log(value);
};
onMounted(() => {
  state.overlayShow = true;
  setTimeout(() => {
    state.overlayShow = false;
  }, 200);
});
</script>

<template>
  <div class="bg-img" style="position: relative">
    <img src="@/assets/image/plan/RouteOptimize.png" />
    <div
      class="navigateBack"
      @click="
        () => {
          router.go(-1);
        }
      "
    ></div>
    <div class="search" style="position: absolute; top: 35%">
      <div>
        <!-- 这里增加了 flex-wrap: wrap; -->
        <van-badge v-for="(tag, index) in tags" :key="index" class="tag-badge">
          <div class="tag-content" :content="tag" />
          <template>
            <van-icon
              name="cross"
              class="badge-icon"
              @click="removeTag(index)"
            />
            <!-- 添加 @click 事件监听 -->
          </template>
        </van-badge>
      </div>
      <br />
      <div class="search_box">
        <SearchBox @search="search"></SearchBox>
      </div>
    </div>
    <div
      style="
        position: absolute;
        top: calc(35% + 60px);
        width: 100%;
        height: 65%;
        overflow: auto;
      "
    >
      <!-- 调整 top 值使列表紧挨搜索框 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in list"
          :title="item.title"
          :label="item.label"
          icon="location-o"
        >
          <template #right-icon>
            <van-icon
              v-if="tags.includes(index)"
              @click="addClicked(index)"
              name="checked"
              color="#00bf69"
            />
            <van-icon
              v-else
              name="add"
              @click="addClicked(index)"
              class="van-icon-add-o"
            />
          </template>
        </van-cell>
      </van-list>
    </div>
    <div
      class="finish_btn"
      @click="
        () => {
          router.push('/aiPlanRes');
        }
      "
    >
      完成
    </div>
  </div>
</template>
<style scoped lang="scss">
.bg-img {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .search {
    display: flex;
    justify-content: center;
    width: 100%;
    // z-index: 2;
    position: absolute;
    top: 26px;
  }
  .search_box {
    width: 100%;
  }
  .navigateBack {
    position: absolute;
    top: 29px;
    left: 12px;
    width: 40px;
    height: 50px;
    background-color: transparent;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tags {
  display: flex;
  flex-direction: column; // 将标签垂直排列
  margin-bottom: 10px;
}

.tag {
  background-color: #f0f0f0;
  border-radius: 20px; // 调整以使标签呈现为扁椭圆形
  padding: 5px 10px;
  margin: 5px 0; // 调整以在标签之间添加一些间距
  display: flex; // 使用 flex 布局以使内容和叉号图标并排显示
  align-items: center; // 使内容和叉号图标垂直居中
}

.delete-icon {
  margin-left: 10px; // 在内容和叉号图标之间添加一些间距
  font-size: 14px; // 调整叉号图标的大小
}
.finish_btn {
  position: absolute;
  padding: 8px 30px;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #00bf69;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  letter-spacing: 2px;
}
.finish_btn:active {
  background-color: #1e6a48;
}
</style>
